<template>
	<view class="bang-box">
		<!-- 爆爆Box -->
		<view class="bar-sticky" :style="{'height':boxHeight+'px;','padding-top':boxTop+'px'}">
			爆爆box
		</view>
		<!-- 轮播图 -->
		<view class="bang-banner">
			<IndexBanner />
		</view>
		<!-- 热门活动 -->
		<view class="hot-activity">
			<view class="hot-title">
				<view class="tit-lef">
					热门活动>>
				</view>
				<view class="tit-rig" @click="gotopage('/pages/tabbar/activity/activity')">查看全部</view>
			</view>
			<!-- 热门活动滑动模块 -->
			<view class="activity-banner">
				<u-scroll-list indicatorBarWidth='256' indicatorColor="#0a0a0a" indicatorActiveColor="#0a0a0a">
					<view class="hot-banner" v-for="(item,index) in moster" :key="index">
						<image class="card-img" :src="item.thumb"></image>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<!-- 主要玩法 -->
		<view class="main-acitivity">
			<view class="activity-kinds">
				<view v-for="(item,index) in hotactivity" :key="index" previousMargin='8' nextMargin='8'
					:class="{'main-act':true,'active' : tabIndex == index,'activedemo' : tabIndex == index}"
					@click="checktabIndex(index)" :data-text=item>
					{{item}}
				</view>
			</view>
		</view>

		<view class="content" v-if="tabIndex==0">
			<RewardOnce></RewardOnce>
		</view>
		<!-- 爆爆赏 -->
		<view class="content" v-if="tabIndex==1">
			<Boom></Boom>
		</view>
		<!-- 爆团 -->
		<view class="content" v-if="tabIndex==2">

		</view>
		<!-- 返回底部按钮 -->
		<view class="backtop">
			<u-back-top :scroll-top="scrollTop" icon="arrow-up" bottom='180rpx'>
			</u-back-top>
		</view>
	</view>
</template>

<script>
	import IndexBanner from './components/NewBanner.vue'
	import RewardOnce from './components/RewardOnce.vue'
	import Boom from './components/Boom.vue'

	export default {
		data() {
			return {
				// 爆爆box的top
				boxTop: 40,
				boxHeight: 44,
				scrollTop: 0,
				hotactivity: ['一番赏', '爆爆赏', '爆团'],
				tab: '',
				bgColor: '#0a0a0a',
				tabIndex: 0,
				list: [{
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				}],
				moster: [{
					thumb: this.imagesUrl('hot-activity.png')
				}, {
					thumb: this.imagesUrl('hot-black.png')
				}, {
					thumb: this.imagesUrl('hot-activity.png')
				}, {
					thumb: this.imagesUrl('hot-black.png')
				}, {
					thumb: this.imagesUrl('hot-activity.png')
				}, ]
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 跳转活动页面
			gotopage(url) {
				uni.switchTab({
					url
				})
			},
			// 改变展示的活动
			checktabIndex(tabIndex) {
				if (tabIndex === 2) {
					uni.navigateTo({
						url: '/pages/boom/boom'
					})
				} else {
					this.tabIndex = tabIndex
				}

			},
		},
		mounted() {
			// #ifdef MP-WEIXIN
			const windTop = uni.getSystemInfoSync().windowTop
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.boxTop = menuButtonInfo.top
			this.boxHeight = menuButtonInfo.bottom + (menuButtonInfo.top - windTop) / 2
			// #endif

			// #ifdef APP-PLUS
			this.boxTop = uni.getSystemInfoSync().statusBarHeight
			// #endif
		},
		components: {
			IndexBanner,
			RewardOnce,

			Boom
		}
	}
</script>

<style lang="scss">
	page {
		background: #0A0A0A;
	}

	.bang-box {
		// width: 100%;
		// height: 100%;
		// background-color: #0A0A0A;
		// padding-bottom: 50rpx;

		// 吸顶
		.bar-sticky {
			position: sticky;
			position: -webkit-sticky;
			top: 0;
			left: 0;
			width: 100vw;
			background-color: #0a0a0a;
			z-index: 99;

			padding-left: 30rpx;
			font-family: YouSheBiaoTiHei;
			font-size: 48rpx;
			line-height: 76rpx;
			color: #fff;
		}

		.bang {
			padding-left: 4rpx;
			color: white;
			font-family: DOUYU;

		}

		.bang-banner {
			background-color: #0A0A0A;
			text-align: center;
		}

		// 热门活动样式
		.hot-activity {
			width: 750rpx;
			margin: 0 auto;


			.hot-title {
				width: 690rpx;
				margin-bottom: 28rpx;
				margin-top: 34rpx;

				padding-left: 30rpx;
				display: flex;
				color: white;
				justify-content: space-between;
				align-items: center;

				.tit-lef {
					color: #FF7803;
					font-size: 36rpx;
					font-family: YouSheBiaoTiHei;
				}

				.tit-rig {
					letter-spacing: 2rpx;
					font-size: 24rpx;
					color: white;
				}
			}

			.activity-banner {
				height: 128rpx;
				width: 750rpx;

				.u-scroll-list {
					.hot-banner {
						height: 128rpx;
						width: 256rpx;
						margin-right: 18rpx;

						.card-img {
							height: 128rpx;
							width: 256rpx;
						}
					}

					.hot-banner:first-child {
						margin-left: 30rpx;
					}

					.hot-banner:last-child {
						padding-right: 30rpx;
					}
				}
			}
		}

		.main-acitivity {
			.activity-kinds {
				color: white;
				display: flex;
				justify-content: left;
				align-items: center;
				margin: 0 30rpx;
				margin-top: 34rpx;

				.main-act {
					margin-right: 64rpx;
					font-size: 48rpx;
					font-family: YouSheBiaoTiHei;
					color: rgb(132, 132, 132);
				}

				// .active {

				// 	color: #e5700b;
				// 	text-shadow: 2px 2px 0 white,
				// 		-2px 2px 0 white,
				// 		2px -2px 0 white,
				// 		-2px -2px 0 white;
				// }

				.active {
					color: #ff7803;
					font-weight: 400;
					position: relative;
					z-index: 0;
				}

				.active::before,
				.active::after {
					content: attr(data-text);
					position: absolute;
					left: 0;
					z-index: -1;
				}

				.active::before {
					-webkit-text-stroke: 20rpx #fff;
				}

				.active::after {
					-webkit-text-stroke: 10rpx #1C1C1C;
				}
			}

			.goods-cards {
				.card-item {
					border-radius: 15rpx;
					margin: 26rpx auto;
					color: white;
					width: 690rpx;
					height: 300rpx;
					background-color: rgb(29, 29, 29);
					display: flex;
					justify-content: left;
					align-items: center;

					.card-lef {
						width: 252rpx;
						height: 252rpx;
						overflow: hidden;
						margin: 0 24rpx;

						.card-img {
							width: 100%;
							height: 100%;
						}
					}

					.card-rig {
						width: 366rpx;
						height: 252rpx;
						display: flex;
						flex-direction: column;
						position: relative;

						.good-name {
							font-size: 28rpx;
							margin-bottom: 12rpx;
						}

						.good-price {
							font-size: 24rpx;
							margin-bottom: 12rpx;

							height: 40rpx;
							position: relative;

							.pricedemo {
								font-size: 40rpx;
							}
						}

						.good-rest {
							font-size: 20rpx;
							text-align: right;
						}

						.good-progress {
							height: 10rpx;
							margin: 12rpx 0;

							.good_rest_line {
								display: flex;

								.line_left {
									height: 8rpx;
									margin-top: 4rpx;
									border-radius: 4rpx;
									background: orangered;
								}

								.line_right {
									height: 8rpx;
									margin-top: 4rpx;
									border-top-right-radius: 4rpx;
									border-bottom-right-radius: 4rpx;
									background: gray;
								}
							}
						}

						.good-show {
							display: flex;
							justify-content: space-around;
							position: absolute;
							bottom: 0;

							.show-img {
								width: 84rpx;
								height: 84rpx;
								margin-right: 10rpx;
							}
						}
					}
				}
			}
		}

		.backtop {}
	}
</style>